<template>
	<view class="layout">
		<view class="header">
			<view class="header-content">
				<view class="header-content-left">
					<view>您好，欢迎使用</view>
					<view>智融金科一站式服务平台</view>
				</view>
				<view class="header-content-right">
					<image src="../../static/images/bgCar01.png" mode=""></image>
				</view>
			</view>
			<view class="header-footer">
				<view :class="cur===index?'active':''" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">{{item}}</view>
			</view>
		</view>
		<view class="form">
			<view class="login">
				<view class="item">
					<view class="title">
						<u-icon name="phone" color="#333" size="48"></u-icon>
						<text>手机号</text>
					</view>
					<u--input
					  placeholder="请输入手机号"
					  border="bottom"
					  clearable
						placeholderStyle="fontSize: 28rpx"
						@change="changeInput"
						:value="phone"
						maxlength="11"
						type="number"
					  ></u--input>
				</view>
				<view class="item">
					<view class="title">
						<u-icon name="lock-open" color="#333" size="48"></u-icon>
						<text>验证码</text>
					</view>
					<view class="yzm">
						<u--input
						  placeholder="请输入验证码"
						  border="none"
						  clearable
							placeholderStyle="fontSize: 28rpx"
							:value="sms"
							@change="inputSms"
							type="number"
						  ></u--input>
							<text @click="getSms" v-if="!smsState">获取验证码</text>
							<text class="rest" v-else>{{ times }}s</text>
					</view>
				</view>
				<view class="item" v-if="cur === 1">
					<view class="title">
						<u-icon name="account" color="#333" size="48"></u-icon>
						<text>推荐人</text>
					</view>
					<u--input
					  placeholder="请输入推荐人电话"
					  border="bottom"
					  clearable
						placeholderStyle="fontSize: 28rpx"
						:value="Tphone"
						@change="inputTp"
						type="number"
					  ></u--input>
				</view>
			</view>
			<view class="btns loginBtn" v-if="cur === 0" @click="submit">登录</view>
			<view class="btns loginBtn" v-if="cur === 1" @click="register">注册</view>
		</view>
		<u-loading-page icon-size="36" 
			loadingText="加载中" 
			fontSize="28rpx" 
			color="#fff" 
			iconSize="48rpx" 
			:loading="open" 
			bg-color="rgba(0,0,0,0.3)">
		</u-loading-page>
	</view>
</template>

<script>
	import { userApi, registerApi } from '../../api/userinfo.js'
	import { toast } from '../../utils/util.js'
	import { storage } from '../../utils/storage.js'
	let times = 60
	export default {
		data() {
			return {
				tabs: ['登录','注册'],
				cur: 0,
				phone: '',
				sms: '',
				Tphone: '',
				open: false,
				// 短信验证码发送状态
				smsState: false,
				// 倒计时
				times,
			}
		},
		methods: {
			changeTab(e){
				this.cur = e
				this.phone = ''
				this.sms = ''
				this.Tphone = ''
			},
			// 登录
			submit(){
				let params = {
					phone: this.phone,
					password: this.sms
				}
				if(!this.phone){
					return toast('手机号不能为空')
				}
				if(!this.sms){
					return toast('验证码不能为空')
				}
				this.open = true
				userApi.loginSmsApi(params).then(res => {
					if(res.code === 200){
						this.open = false
						storage.set('userInfo',res.data)
						toast(res.msg)
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch(err => {
					this.open = false
				})
			},
			changeInput(e){
				this.phone = e;
			},
			inputSms(e) {
				this.sms = e;
			},
			inputTp(e){
				this.Tphone = e;
			},
			// 获取验证码
			getSms(){
				if(!this.phone){
					return toast("手机号不能为空")
				}
				let params = {
					phone: this.phone,
					type: 3,
				}
				this.open = true
				userApi.smsApi(params).then(res => {
					if(res.code === 200){
						this.open = false
						this.timer()
					}
				}).catch(err => {
					this.open = false
				})
			},
			// 执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval(() => {
					app.times = app.times - 1
					if(app.times<10){
						app.times = `0${app.times}`
					}
					if (app.times <= 0) {
						app.smsState = false
						app.times = times
						clearInterval(inter)
					}
				}, 1000)
			},
			// 注册
			register(){
				let params = {
					code: this.sms,
					phone: this.phone,
					inviterPhone: this.Tphone,
				}
				registerApi(params).then(res => {
					if(res.code === 200){
						this.open = false
						// storage.set('userinfo',res.data)
						toast(res.msg)
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.layout{
		height: 100%;
	}
	.header {
		width: 100%;
		padding: 90rpx 48rpx 0rpx;
		background-image: linear-gradient(75deg,rgba(255, 206, 185, 0.7) ,rgba(255, 240, 234, 0.2), rgba(255, 206, 185, 0.3));
		&-content{
			display: flex;
			justify-content: space-between;
			&-left{
				padding-top: 160rpx;
				color: #333;
				text-align: left;
				font-family: Source Han Sans CN;
				font-size: 36rpx;
				font-style: normal;
				font-weight: 500;
				view{
					margin-top: 20rpx;
				}
			}
			&-right{
				width: 240rpx;
				height: 288rpx;
				image{
					width: 240rpx;
					height: 288rpx;
				}
			}
		}
		&-footer{
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 80rpx;
			padding: 30rpx 0;
			view{
				color: #666;
				text-align: center;
				font-family: Source Han Sans CN;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
			}
			.active{
				color: #FF6A2B;
				text-align: center;
				font-family: Source Han Sans CN;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 600;
			}
		}
	}
	.form{
		width: 100%;
		background: #fff;
		padding: 64rpx;
		border-radius: 20rpx 20rpx 0 0;
		.login{
			width: 100%;
			.item{
				margin-bottom: 44rpx;
				.title{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 10rpx;
					text{
						color: #333;
						font-family: Source Han Sans CN;
						font-size: 36rpx;
						font-style: normal;
						font-weight: 500;
						
					}
				}
				.yzm{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #eee;
					margin-bottom: 10rpx;
					padding: 15rpx 0 15rpx 15rpx;
					text{
						width: 200rpx;
						text-align: center;
						color: #FF814B;
						font-size: 28rpx;
						padding-left: 15rpx;
					}
				}
			}
		}
		.loginBtn{
			margin-top: 120rpx;
			color: #fff;
		}
	}
</style>